<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.15.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>

<div>
    <button id="button" class="btn btn-secondary">Show Row</button>
    <button id="button2" class="btn btn-secondary">Hide Row</button>
</div>

<div class="toolbar form-inline">
    <span>Fixed Number: </span>
    <input class="form-control" id="fixedNumber" type="number" value="2" min="1" max="5">
</div>

<table id="table" data-height="400" data-show-columns="true"></table>

<script>
    var $table = $('#table')

    function buildTable($el, cells, rows) {
        var i
        var j
        var row
        var columns = [{
            field: 'state',
            checkbox: true,
            rowspan: 2,
            valign: 'middle'
        }]
        var data = []

        for (i = 0; i < cells; i++) {
            columns.push({
                field: 'field' + i,
                title: 'Cell' + i,
                sortable: true,
                rowspan: 2,
                valign: 'middle',
                formatter: function (val) {
                    return '<div class="item">' + val + '</div>'
                },
                events: {
                    'click .item': function () {
                        console.log('click')
                    }
                }
            })
        }
        for (i = 0; i < rows; i++) {
            row = {}
            for (j = 0; j < cells + 3; j++) {
                row['field' + j] = 'Row-' + i + '-' + j
            }
            data.push(row)
        }
        columns.push({
            title: 'More Cells',
            colspan: 3,
            align: 'center'
        })
        $el.bootstrapTable('destroy').bootstrapTable({
            columns: [columns, [{
                field: 'field' + cells,
                title: 'Cells' + cells,
                sortable: true,
                align: 'center'
            }, {
                field: 'field' + (cells + 1),
                title: 'Cells' + (cells + 1),
                sortable: true,
                align: 'center'
            }, {
                field: 'field' + (cells + 2),
                title: 'Cells' + (cells + 2),
                align: 'center'
            }]],
            data: data,
            search: true,
            toolbar: '.toolbar',
            fixedColumns: true,
            fixedNumber: +$('#fixedNumber').val()
        })
    }

    $(function() {
        buildTable($table, 20, 20)

        $('#fixedNumber').change(function () {
            buildTable($table, 20, 20)
        })

        $('#button').click(function() {
            $table.bootstrapTable('showRow', {
                index: 1
            })
        })

        $('#button2').click(function() {
            $table.bootstrapTable('hideRow', {
                index: 1
            })
        })
    })
</script>
</body>
</html>